<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 角色列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="danger" icon="el-icon-delete" class="handle-del mr10" @click="DeleteRole" plain>批量删除</el-button>
                <el-input v-model="page.name" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="getData()" plain>搜索</el-button>
                &nbsp;
                <el-button type="success" icon="el-icon-plus" @click="AddRoleHide" plain>添加角色</el-button>&nbsp;
                <el-button type="warning" icon="el-icon-user" @click="AddRolePermissions = true" plain>权限分配</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="180" align="center"></el-table-column>
                <el-table-column prop="roleDescription" label="角色介绍" width="180" align="center"></el-table-column>
                <el-table-column label="角色状态" width="180" align="center">
                    <template slot-scope="aaa">
                        <el-tag type="success" v-if="aaa.row.roleStart == true">启用</el-tag>
                        <el-tag type="danger" v-if="aaa.row.roleStart == false">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" size="medium" icon="el-icon-edit" @click="UpdateRoleHide(scope.$index, scope.row)"
                            >编辑</el-button
                        > -->
                        <el-button type="text" size="medium" icon="el-icon-delete" class="red" @click="RoleDelete(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.pageindex"
                    :page-size="page.pagesize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="角色添加" :visible.sync="AddRole" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="角色名">
                    <el-input v-model="form.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色介绍">
                    <el-input v-model="form.roleDescription"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddRole = false">取 消</el-button>
                <el-button type="primary" @click="PostRole">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑弹出框 -->
        <el-dialog title="角色编辑" :visible.sync="updateRole" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="角色名">
                    <el-input v-model="form.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色介绍">
                    <el-input v-model="form.roleDescription"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateRole = false">取 消</el-button>
                <el-button type="primary" @click="RoleUpdate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 为角色添加权限 -->
        <el-dialog title="权限分配" :visible.sync="AddRolePermissions">
            <div>
                <el-row>
                    <el-col :span="12"
                        ><div class="grid-content bg-purple">
                            <el-table
                                ref="singleTable"
                                :data="RoleTable"
                                highlight-current-row
                                @current-change="handleCurrentChange"
                                style="width: 100%"
                            >
                                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                            </el-table></div
                    ></el-col>
                    <el-col :span="12"
                        ><div class="grid-content bg-purple-light">
                            <el-tree
                                ref="tree"
                                :data="data5"
                                show-checkbox
                                default-expand-all
                                node-key="id"
                                highlight-current
                                :props="{ label: 'permissionsName', children: 'children', hasChildren: 'hasChildren' }"
                                @check="handleSubmit"
                            >
                            </el-tree></div
                    ></el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="AddRolePermissions = false">取 消</el-button>
                <el-button type="primary" @click="AddPermission">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getRoleList, getRole, getRoleById, UpdateRoleList, PostRoleInfo,PostRolePermissions, getpermissionstrueById } from '@/api/roles.js';
import { getpermissionstrue } from '@/api/permissions.js/';
export default {
    // name: 'basetable',
    data() {
        return {
            //权限树形列表
            data5: [],
            //角色列表查询+分页参数
            page: {
                // address: '',
                name: '',
                pageindex: 1,
                pagesize: 5
            },
            //'为角色添加权限'的弹出框的状态
            dialogFormVisible: false,
            //角色列表集合（含分页）
            tableData: [],
            //角色列表集合（不含分页）
            RoleTable: [],
            //角色权限名称集合
            PermissionsNames: [],
            //权限集合
            PermissionsTree: [],
            //角色单选框集合
            roleids: {
                roleid: undefined
            },
            //'添加弹出框'的状态
            AddRole: false,
            //'修改弹出框'的状态
            updateRole: false,
            //角色反填需要的id
            RoleById: {
                id: 0
            },
            //'角色添加权限弹出框'的状态
            AddRolePermissions: false,
            //总页码
            pageTotal: 0,
            //添加角色权限的对象
            form: {
                roleName: '',
                roleDescription: '',
                roleStart: true,
                delete: 0
            },
            idx: -1,
            id: -1,
            formLabelWidth: '120px'
        };
    },
    created() {
        //角色列表
        this.getData();
        this.GetRole();
        //权限列表
        this.GetPermissions();
    },
    methods: {
        //树形获取值
        handleSubmit() {},
        //单选操作
        handleCurrentChange(val) {
            this.roleids.roleid = val.id;
            getpermissionstrueById(this.roleids).then((res) => {
                //this.PermissionsTree = 
                console.log(res[0].permissId);
                if(res[0].permissId.length==0)
                {
                    this.$refs.tree.setCheckedKeys(res[0].permissId);
                    console.log(this.$refs.tree.setCheckedKeys(res[0].permissId));
                }
                else{
                    this.$refs.tree.setCheckedKeys(res[0].permissId);
                }
                
                //this.handleSubmit();
                //console.log(this.PermissionsTree);
            });
        },
        //为角色添加权限
        AddPermission() {
            let arr=this.$refs.tree.getCheckedKeys();
            this.$refs.tree.getCheckedKeys().forEach(element => {
                arr.push(element);
            });
            let obj = {
                PermissionId: arr.toString(),
                RoleId: this.roleids.roleid,
            };
            PostRolePermissions(obj).then((res) => {
                if (res.code == 200) {
                    //录入成功！
                    this.$message.success('录入成功！');
                } else {
                    this.$message({
                        showClose: true,
                        message: '录入失败！',
                        type: 'error'
                    });
                }
            });
        },

        //权限列表显示
        GetPermissions() {
            getpermissionstrue().then((res) => {
                this.data5 = res.data;
            });
        },
        //角色列表显示（不含分页）
        GetRole() {
            getRole().then((res) => {
                this.RoleTable = res;
                console.log(this.RoleTable);
            });
        },
        //  角色列表显示（含分页）
        getData() {
            getRoleList(this.page).then((res) => {
                this.tableData = res.data.plist;
                this.pageTotal = res.data.recordCount;
            });
        },
        //角色添加弹出框
        AddRoleHide() {
            this.form = {};
            this.AddRole = true;
        },
        //角色录入
        PostRole() {
            PostRoleInfo(this.form).then((res) => {
                if (res.code == 200) {
                    //录入成功！
                    this.$message.success(res.message);
                    this.AddRole = false;
                    this.getRoleList();
                } else {
                    this.$message({
                        showClose: true,
                        message: '录入失败！',
                        type: 'error'
                    });
                }
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 删除操作
        RoleDelete(row) {
            alert(row.id);
        },
        //角色批量删除
        DeleteRole() {},
        // //角色编辑弹出框
        UpdateRoleHide(index, row) {
            this.form = {};
            this.updateRole = true;
            this.RoleById.id = row.id;
            getRoleById(this.RoleById).then((res) => {
                this.form = res.data;
            });
        },
        //角色修改操作
        RoleUpdate() {
            UpdateRoleList(this.form).then((res) => {
                if (res == 1) {
                    //录入成功！
                    this.$message.success('编辑成功！');
                    this.updateRole = false;
                    this.getData();
                } else {
                    this.$message({
                        showClose: true,
                        message: '编辑失败！',
                        type: 'error'
                    });
                }
            });
        },
        // 保存编辑
        saveEdit() {},
        // 分页导航
        handlePageChange(val) {
            this.$set(this.page, 'pageindex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
